import { useLocation } from 'react-router-dom';

import { CustomerJourneyParams } from "./RouteState.type";

const RouteStatePageTo = () => {
    const location: { state: CustomerJourneyParams | undefined } = useLocation(); // // ********* 重点 重点 *********
    const receivedParams: CustomerJourneyParams = location.state || {
        userId: '',
        userName: '',
        isVip: false
    };

    return (
        <div>
            <h1>B页面 - 接收参数 </h1>
            <ul>
                <li>用户ID: {receivedParams.userId}</li>
                <li>用户名: {receivedParams.userName}</li>
                <li>是否VIP: {receivedParams.isVip ? '是' : '否'}</li>
                <li>
                    订单ID列表:
                    {receivedParams.orderIds
                        ? receivedParams.orderIds.join(', ')
                        : '无'}
                </li>
            </ul>
        </div>
    );
};
export default RouteStatePageTo;